import React from 'react';
import useUploadOss from '@/hooks/useUploadOss';

import encryptUtil from '@/utils/encrypt';
import AudioRecorder from '@/utils/recorder';
import secret from '@/utils/secret';

const Divider = () => <div style={{ borderTop: '1px solid #ccc', margin: '12px 0' }}></div>;

export default function Upload({ location }) {
    const [url, setUrl] = React.useState();
    const [decryptResult, setDecryptResult] = React.useState();
    const recRef = React.useRef();
    const [uploadFile] = useUploadOss();

    React.useEffect(() => {
        recRef.current = new AudioRecorder();
        recRef.current.recInitialize();

        return () => {
            recRef.current.destroy();
        };
    }, []);

    if (location?.query?.pwd !== '<>') {
        return null;
    }

    const handleUpload = async e => {
        const result = await uploadFile(e.target.files[0]);
        setUrl(result);
    };

    const handleDecrypt = () => {
        const content = document.querySelector('.encrypt-content').value;
        const result = encryptUtil.decrypt(content, secret);
        setDecryptResult(result);
    };

    // const testUrl = window.encodeURIComponent(
    //     'https://vv-tech-public-bucket.oss-cn-hongkong.aliyuncs.com/1607324128142da2dd4ed-b13a-4fd5-8919-497359601cbe_xxx.pptx'
    // );

    const handleRecStart = () => {
        recRef.current.recStart();
    };

    const handleRecStop = () => {
        recRef.current.recStop();
    };

    const handleRecUpload = async () => {
        const blob = recRef.current.getBlob();
        const file = new window.File([blob], `${+new Date()}.mp3`, { type: blob.type });
        const result = await uploadFile(file);
        console.log(result, '===上传成功===');
    };

    const handleRecDownload = () => {
        console.log('===开始下载当前录音===');
        const blob = recRef.current.getBlob();
        if (!blob) {
            console.log('===不存在录音===');
            return;
        }
        const link = document.createElement('a');
        const body = document.querySelector('body');

        link.href = window.URL.createObjectURL(blob);
        link.download = '录音.mp3';

        // fix Firefox
        link.style.display = 'none';
        body.appendChild(link);

        link.click();
        body.removeChild(link);

        window.URL.revokeObjectURL(link.href);
    };

    return (
        <div style={{ padding: 16 }}>
            <div>
                <input type="file" onChange={handleUpload} />
            </div>
            <div>{url}</div>
            <Divider />
            <div>
                <textarea style={{ width: 300, height: 120 }} className="encrypt-content"></textarea>
            </div>
            <div>{JSON.stringify(decryptResult)}</div>
            <div>
                <button type="button" onClick={handleDecrypt}>
                    解密
                </button>
            </div>
            <div>
                <button type="button" onClick={handleRecStart}>
                    开始录音
                </button>
                <button type="button" onClick={handleRecStop}>
                    结束录音
                </button>
                <button type="button" onClick={handleRecUpload}>
                    上传录音
                </button>
                <button type="button" onClick={handleRecDownload}>
                    下载录音
                </button>
            </div>
        </div>
    );
}
